<template>
    <div style="background-color: blanchedalmond;">
        状态管理
        <h1>这个是我儿子</h1>
        <SonBoy @boy="boyHandle"/>
        <h1>这个是我女儿</h1>
        <SonGirl  @girl="girlHandle"/>
        <p>我儿子的成绩是：{{  gradeBoy }},我女儿的成绩是：{{  gradeGirl }}</p>
        <p>我先看看我的金库里有多少钱，哎，只剩下{{ store.money }}</p>
        <p>给成绩好的那个奖励100元吧 <button @click.once="send(100)">奖励</button></p>
        <p>儿子的零花钱有{{ moneyBoy }},女儿的零花钱有{{ moneyGirl }}</p>
    </div>
</template>

<script>
import SonBoy from '../components/SonBoy'
import SonGirl from '../components/SonGirl'
import {useMyStore} from '../store/myStore.js'
export default{
    components:{
       SonBoy,
       SonGirl
    },
    methods: {
        boyHandle(val){
            this.gradeBoy=val
            
        },
        girlHandle(val){
            this.gradeGirl=val
        },
        send(val){
            if(this.gradeBoy > this.gradeGirl && this.gradeGirl >=60){
                this.moneyBoy += val
                this.store.decrement(val)
            }else if(this.gradeBoy < this.gradeGirl && this.gradeBoy >=60){
                this.moneyGirl +=val
                this.store.decrement(val)
            }else if(this.gradeBoy == this.gradeGirl && this.gradeBoy >=60){
                this.moneyGirl += val/2
                this.moneyBoy += val/2
                this.store.decrement(val)
            }else{
                alert('考不及格，还想要奖励！！！！！')
            }
            
        }
    },
    data() {
        return {
            gradeBoy:'',
            gradeGirl:'',
            store:useMyStore(),
            moneyBoy:0,
            moneyGirl:0
        }
    },
}
</script>